<template>
  <section class="article-list col-xl-3 col-lg-4 col-md-4 col-sm-6 col-xs-12 q-mb-md q-px-sm q-pt-md">
    <div class="row items-center q-pb-sm items-center">
      <h2 class="title size-24 col text-shadow-white">{{ title }}</h2>
      <q-btn v-if="link" @click="$router.push(link)" dense label="更多" flat color="grey-7"/>
    </div>
    <q-list dense no-border>
      <q-item v-for="(article, index) in articles" :key="index" class="cursor-pointer">
        <q-item-section class="size-14 q-py-sm">
          <q-item-label class="ellipsis q-pr-md"><router-link class="link" :to="`/${path}/${article.id}`">{{ article.name || article.title }}</router-link></q-item-label>
        </q-item-section>
        <q-item-section avatar class="size-14 row items-center text-grey-7">
          <a-heads :user="article.user || article.add_user" :size="16" :editors="article.editors"></a-heads>
        </q-item-section>
      </q-item>
    </q-list>
  </section>
</template>

<script>
    export default {
      name: 'aArticleList',
      props: {
        path: {
          type: String,
          required: true
        },
        articles: {
          type: Array,
          required: true
        },
        title: {
          type: String,
          required: true
        },
        link: {
          type: String,
          required: false
        }
      },
      data () {
        return {
        }
      }
    }
</script>

<style lang="stylus">
</style>
